<template>
  <view class="container">
    <FilterNavbar>
      <template #center>
        <view class="navbar-title"> {{ detailInfo.typeName }} </view>
      </template>
    </FilterNavbar>
    <view class="info-box">
      <ve-card
        :customContentStyle="{
          padding: '0.1rpx 32rpx 32rpx',
        }"
        :title="detailInfo.title"
      >
        <view class="detail-time">{{ detailInfo.sendTime }}</view>
        <uv-parse :content="detailInfo.content"></uv-parse>
      </ve-card>

      <ve-bottom-box size="mini">
        <ve-button type="plain" size="long" @click="getDetailInfo(detailInfo.lastId)" v-if="detailInfo.lastId">上一条</ve-button>
        <ve-button
          :type="detailInfo.lastId ? 'primary' : 'plain'"
          size="long"
          @click="routeIndex"
          v-if="!detailInfo.lastId || !detailInfo.nextId"
          >关闭</ve-button
        >
        <ve-button type="primary" size="long" @click="getDetailInfo(detailInfo.nextId)" v-if="detailInfo.nextId">下一条</ve-button>
      </ve-bottom-box>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { getNoticeDetail, readNotice } from '@/api/info/index'
  import FilterNavbar from '@/components/FilterNavbar'

  const detailInfo = ref({})
  const pageType = ref(null)

  // 阅读消息
  const readMsg = (id: any) => {
    readNotice({
      id: id,
    }).then((res) => {
      console.log(res, '阅读消息')
    })
  }

  // 获取费用信息
  const getDetailInfo = (id: number | string) => {
    console.log(pageType.value, 'pageType.value')

    let params =
      pageType.value == 'isIndex'
        ? {
            id: id,
            status: 0,
          }
        : {
            id: id,
          }
    getNoticeDetail(params).then((res) => {
      detailInfo.value = res.result
      readMsg(id)
    })
  }
  const routeIndex = () => {
    uni.switchTab({ url: '/pages/index/index' })
  }

  onLoad((option: any) => {
    console.log(option, 'option')
    pageType.value = option.pageType || null
    if (option.id) {
      getDetailInfo(option.id)
    }
  })
</script>

<style lang="less" scoped>
  .container {
    height: auto;
    min-height: 100%;
  }

  .info-box {
    padding: 24rpx 24rpx;
    .ve-card {
      overflow: hidden;
    }
    .detail-time {
      font-size: 26rpx;
      line-height: 32rpx;
      padding: 20rpx 0;
      color: #9ea5bb;
    }
  }

  .ve-bottom-box {
    height: 132rpx;
  }
  .index-logo-srcnew {
    position: none;
  }
</style>
